<script>
import Basic from "./components/Basic.vue";
import DataOverview from "./components/DataOverview.vue";
import OnlineCourseFinish from "./components/OnlineCourseFinish.vue";
import OnlineExamPass from "./components/OnlineExamPass.vue";
import OfflineExamPass from "./components/OfflineExamPass.vue";
import OfflineCourseAttendance from "./components/OfflineCourseAttendance.vue";
import OnlineExamPassRank from "./components/OnlineExamPassRank.vue";
import OnlineCourseFinishDetail from "./components/OnlineCourseFinishDetail.vue";
import OnlineCourseDepartmentFinishDetail from "./components/OnlineCourseDepartmentFinishDetail.vue";
import DepartmentOnlineExamPassDetail from "./components/DepartmentOnlineExamPassDetail.vue";
import DepartmentOutlineExamPassDetail from "./components/DepartmentOutlineExamPassDetail.vue";
import DepartmentOutlineCourseCheckDetail from "./components/DepartmentOutlineCourseCheckDetail.vue";
import TeacherEvaluationCardTitDetail from "./components/TeacherEvaluationCardTitDetail.vue";
import TeacherEvaluationSubjectiveDetail from "./components/TeacherEvaluationSubjectiveDetail.vue";
import StudentStatisticalSummary from "./components/StudentStatisticalSummary.vue";
import DepartmentStatisticalSummary from "./components/DepartmentStatisticalSummary.vue";
import { EditOutlined } from "@ant-design/icons-vue";
import { message } from 'ant-design-vue';

export default {
  name: "EditComponents",
  components: {
    Basic,
    DataOverview,
    OnlineCourseFinish,
    OnlineExamPass,
    OfflineExamPass,
    OfflineCourseAttendance,
    OnlineExamPassRank,
    OnlineCourseFinishDetail,
    OnlineCourseDepartmentFinishDetail,
    DepartmentOnlineExamPassDetail,
    DepartmentOutlineExamPassDetail,
    DepartmentOutlineCourseCheckDetail,
    TeacherEvaluationCardTitDetail,
    TeacherEvaluationSubjectiveDetail,
    StudentStatisticalSummary,
    DepartmentStatisticalSummary,
    EditOutlined,
  },
  data() {
    return {
      componentsData: [
        {
          nameId: "Basic",
          name: "+项目基本信息组件",
          isOnce: false,
          isHalf: false,
        },
        {
          nameId: "DataOverview",
          name: "+数据概览",
          isOnce: false,
          isHalf: false,
        },
        {
          nameId: "OnlineCourseFinish",
          name: "+线上课程完成情况",
          isHalf: true,
        },
        {
          nameId: "OnlineExamPass",
          name: "+线上考试通过情况",
          isHalf: true,
        },
        {
          nameId: "OfflineExamPass",
          name: "+线下考试通过情况",
          isHalf: true,
        },
        {
          nameId: "OfflineCourseAttendance",
          name: "+线下课考勤情况",
          isHalf: true,
        },
        {
          nameId: "OnlineExamPassRank",
          name: "+线下考试通过率排行榜",
          isHalf: true,
        },
        {
          nameId: "OnlineCourseFinishDetail",
          name: "+线上课完成明细",
          isOnce: false,
          isHalf: false,
        },
        {
          nameId: "OnlineCourseDepartmentFinishDetail",
          name: "+线上课部门完成明细",
          isHalf: false,
        },
        {
          nameId: "DepartmentOnlineExamPassDetail",
          name: "+部门线上考试通过明细",
          isHalf: false,
        },
        {
          nameId: "DepartmentOutlineExamPassDetail",
          name: "+部门线下考试通过明细",
          isHalf: false,
        },
        {
          nameId: "DepartmentOutlineCourseCheckDetail",
          name: "+部门线下课考勤明细",
          isHalf: false,
        },
        {
          nameId: "TeacherEvaluationCardTitDetail",
          name: "+讲师评价-评价项得分明细",
          isHalf: false,
        },
        {
          nameId: "TeacherEvaluationSubjectiveDetail",
          name: "+讲师评价-主观题答题明细",
          isHalf: false,
        },
        {
          nameId: "StudentStatisticalSummary",
          name: "+学员统计汇总",
          isOnce: false,
          isHalf: false,
        },
        {
          nameId: "DepartmentStatisticalSummary",
          name: "+部门统计汇总",
          isOnce: false,
          isHalf: false,
        },
      ],
      components: [], //左侧已添加显示的组件数据
      isActive: -1,
      isShowMoveUp: true,
      isShowMoveDown: true,
      isShowMoveLeft: true,
      isShowMoveRight: true,
      title: "项目名称",
      currentTitle: "项目名称",
      visible: false,
    };
  },
  methods: {
    addComponents(component) {
      //添加按钮做次数限制
      if (
        component.isOnce &&
        (component.nameId == "Basic" || component.nameId == "DataOverview" || component.nameId == "OnlineCourseFinishDetail" || component.nameId == "StudentStatisticalSummary" || component.nameId == "DepartmentStatisticalSummary")
      ) {
        let onceComponentIndex;
        this.components.forEach((item, index) => {
          if (item.nameId == component.nameId) {
            onceComponentIndex = index;
          }
        });
        message.warning('已添加相同组件！');
        let componentPosition = this.getComponentPosition(onceComponentIndex);
        let contents = document.getElementById("contents");
        contents.scroll(componentPosition);
        this.addComponentBoxActive(onceComponentIndex);
      } else {
        this.components.push({
          nameId: component.nameId,
          isHalf: component.isHalf,
        });
        if (component.nameId == "Basic") {
          this.componentsData[0].isOnce = true;
        } else if (component.nameId == "DataOverview") {
          this.componentsData[1].isOnce = true;
        } else if (component.nameId == "OnlineCourseFinishDetail") {
          this.componentsData[7].isOnce = true;
        } else if (component.nameId == "StudentStatisticalSummary") {
          this.componentsData[14].isOnce = true;
        } else if (component.nameId == "DepartmentStatisticalSummary") {
          this.componentsData[15].isOnce = true;
        }
        setTimeout(() => {
          this.addComponentBoxActive(this.components.length - 1);
        }, 60);
      }
    },
    onActive(index) {
      this.isActive = index;
      //是否显示上按钮
      this.isShowMoveUp = this.components.slice(index - 1, index).length != 0;
      //是否显示下按钮
      this.isShowMoveDown = this.components.slice(index + 1).length != 0;
    },
    handleComponents(index1, index2) {
      this.components.splice(
        index2,
        2,
        this.components[index1],
        this.components[index2]
      );
    },
    moveUp(index) {
      this.handleComponents(index, index - 1);
      this.cancelComponentEditActive();
    },
    moveDown(index) {
      this.handleComponents(index + 1, index);
      this.cancelComponentEditActive();
    },
    stretchComponent(index) {
      this.components[index].isHalf = !this.components[index].isHalf;
      this.cancelComponentEditActive();
    },
    copyComponent(index) {
      this.components.splice(index + 1, 0, {
        nameId: this.components[index].nameId,
        isHalf: this.components[index].isHalf,
      });
      setTimeout(() => {
        this.addComponentBoxActive(index + 1);
      }, 60);
      this.cancelComponentEditActive();
    },
    deleteComponent(index) {
      this.components.splice(index, 1);
      this.cancelComponentEditActive();
    },
    getComponentPosition(index) {
      let contents = document.getElementById("contents");
      let ele = document.getElementById(`component-box${index}`);
      let clientRect = ele.getBoundingClientRect();
      let scrollTop = contents.scrollTop;
      let scrollLeft = contents.scrollLeft;
      let top = clientRect.top + scrollTop - 84 - 27; //
      let left = clientRect.left + scrollLeft;
      return { top: top, left: left };
    },
    addComponentBoxActive(index) {
      let ele = document.getElementById(`component-box${index}`).children;
      ele[0].classList.add("component-box-active");
      setTimeout(() => {
        ele[0].classList.remove("component-box-active");
      }, 200);
    },
    cancelComponentEditActive() {
      setTimeout(() => {
        this.isActive = -1;
      }, 10);
    },
    editEnter(e) {
      this.title = this.currentTitle.trim();
      this.visible = false;
    },
    updateData(){

    },
    cancel(){

    },
    save(){

    },
    saveAsTemplate(){

    }
  },
  watch: {
    currentTitle(newVal, oldVal) {
      this.currentTitle = this.currentTitle.trim();
    },
    visible() {
      this.title = this.currentTitle;
    }
  },
};
</script>

<template>
  <div class="edit-container">
    <header class="header">
      <a-popover
        placement="bottomLeft"
        v-model:visible="visible"
        trigger="click"
      >
        <template #content>
          <a-textarea
            class="edit-container__header__textarea"
            v-model:value="currentTitle"
            showCount
            :maxlength="60"
            :autoSize="{ minRows: 3, maxRows: 5 }"
            placeholder="请输入标题名称"
            @pressEnter="editEnter"
          ></a-textarea>
        </template>
        <div class="header__left" @click="visible = !visible">
          <div class="header__left__title">
            <span>{{ title }}</span>
            <span> 一 培训总结报告</span>
          </div>
          <EditOutlined class="edit-icon" />
        </div>
      </a-popover>
      <div>
        <span>数据生成时间：</span>
        <span>2023-07-11 18:30</span>
        <a-button class="ml-16" type="primary" @click="updateData()">更新数据</a-button>
      </div>
    </header>
    <main class="main-box">
      <section class="main">
        <div id="contents" class="contents">
          <div
            :id="`component-box${index}`"
            class="component-box"
            :class="item && item.isHalf ? 'half' : ''"
            v-for="(item, index) in components"
            :key="index"
            @click="onActive(index)"
          >
            <component
              class="component"
              :class="isActive == index ? 'component-edit-active' : ''"
              :is="item.nameId"
              :echartsId="index"
            ></component>
            <div class="component-btns" v-show="isActive == index">
              <div
                class="component-btn"
                v-show="isShowMoveUp"
                @click="moveUp(index)"
              >
                <img src="./assets/svg/up.svg" />
              </div>
              <div
                class="component-btn"
                v-show="isShowMoveDown"
                @click="moveDown(index)"
              >
                <img src="./assets/svg/down.svg" />
              </div>
              <div
                class="component-btn"
                v-show="
                  item.nameId == 'OnlineCourseFinish' ||
                  item.nameId == 'OnlineExamPass' ||
                  item.nameId == 'OfflineExamPass' ||
                  item.nameId == 'OfflineCourseAttendance' ||
                  item.nameId == 'OnlineExamPassRank'
                "
                @click="stretchComponent(index)"
              >
                <img src="./assets/svg/stretch.svg" />
              </div>
              <div
                class="component-btn"
                v-show="item.nameId != 'Basic' && item.nameId != 'DataOverview'"
                @click="copyComponent(index)"
              >
                <img src="./assets/svg/copy.svg" />
              </div>
              <div class="component-btn" @click="deleteComponent(index)">
                <img src="./assets/svg/delete.svg" />
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          <a-button @click="cancel()">取消</a-button>
          <a-button type="primary" ghost @click="save()">保存</a-button>
          <a-button type="primary" @click="saveAsTemplate()">存为模板</a-button>
        </div>
      </section>
      <aside class="aside-right">
        <div v-for="(item, index) in componentsData" :key="index">
          <button class="aside-right__btn" @click="addComponents(item)">
            {{ item.name }}
          </button>
        </div>
      </aside>
    </main>
  </div>
</template>

<style lang="less" scoped>
.edit-container__header__textarea {
  width: 318px;
}

.edit-container {
  padding: 24px 24px 24px 12px;
  background-color: #f5f5f5;

  .header {
    display: flex;
    justify-content: space-between;
    padding-left: 12px;
    padding-bottom: 16px;

    .header__left {
      display: flex;
      align-items: center;
      cursor: pointer;

      .header__left__title {
        display: inline-block;
        max-width: 763px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .header__left__title > span {
        font-weight: 600;
        font-size: 20px;
      }

      .edit-icon {
        margin-left: 4px;
        color: #6b7785;
      }
    }
  }

  .main-box {
    display: flex;
    justify-content: space-between;
    height: calc(~"100vh - 84px - 44px"); //

    .main {
      position: relative;
      flex: auto;
      height: 100%;

      .contents {
        overflow-y: scroll;
        height: 100%;

        .component-box {
          position: relative;
          padding: 12px;

          .component {
            position: relative;
            border-radius: 4px;
          }

          .component-edit-active {
            border: 1px solid #0093ff;
            box-shadow: -1px -1px 4px rgba(0, 147, 255, 0.15), 1px 1px 4px rgba(0, 147, 255, 0.15);
          }

          .component-box-active {
            border: 1px solid #0093ff;
            box-shadow: -1px -1px 4px rgba(0, 147, 255, 0.15), 1px 1px 4px rgba(0, 147, 255, 0.15);
          }

          .component-btns {
            position: absolute;
            z-index: 10;
            bottom: -38px;
            right: 12px;
            background-color: #fff;
            width: fit-content;
            height: 52px;
            padding: 16px;

            .component-btn {
              display: inline-block;
              height: 20px;
              margin-right: 32px;
              cursor: pointer;
            }

            .component-btn:last-child {
              margin-right: 0;
            }
          }
        }

        .half {
          display: inline-block;
          width: 50%;
        }

        .component-box:first-child {
          padding-top: 0;
        }
      }

      .contents::after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }

      .footer {
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        width: calc(~"100% - 367px"); //
        height: 76px;
        margin-left: 12px;
        background-color: #FFF;
      }
    }

    .aside-right {
      flex: none;
      width: 280px;
      background-color: #fff;
      margin-left: 12px;
      padding: 24px 24px 8px 24px;
      border: 1px solid #e5e6eb;
      overflow-y: auto;

      .aside-right__btn {
        width: 100%;
        background-color: #fff;
        padding: 4px;
        margin-bottom: 16px;
        border: 1px solid #e5e6eb;
        border-radius: 4px;
      }
    }
  }
  .ml-16 {
    margin-left: 16px;
  }
}
</style>
